<script setup lang="ts">
import { onMounted, ref } from 'vue'
import { storeToRefs } from 'pinia'
import { useOrderStore } from '@/store/modules/order'

const props = defineProps({
  id: String
})
const id = props.id as string
// 支付
const dialogVisible = ref(false)
// 存储定时器
let timer = ref<any>()

const orderStore = useOrderStore()
const { orderInfo, ercodeImgUrl } = storeToRefs(orderStore)

// 获取订单详情
const fetchGetOrderInfoByIdData = (id: string) => {
  orderStore.fetchGetOrderInfoById(id)
}
onMounted(() => {
  fetchGetOrderInfoByIdData(id)
})
// 订单状态有3种：orderStatus : 0:预约，未支付 -1:取消预约（按钮不展示） 1:支付成功
const cancelOrderHandle = () => {
  orderStore.fetchCancelOrderById(id)
  fetchGetOrderInfoByIdData(id)
}

// 打开支付窗口
const payDialogOpenHandle = async () => {
  dialogVisible.value = true
  await orderStore.fetchWxPayErcodeByOrderId(id)
  timer.value = setInterval(async () => {
    const res = await orderStore.fetchPayResultStatusById(id)
    if (res?.data) {
      dialogVisible.value = false
      ElMessage.success('支付成功')
      clearInterval(timer.value)
      fetchGetOrderInfoByIdData(id)
    }
  }, 2000)
}
// 关闭窗口
const closeDialog = () => {
  dialogVisible.value = false
  clearInterval(timer.value)
}
// 对话框右上角关闭
const close = () => {
  clearInterval(timer.value)
}
</script>
<template>
  <div class="order-details">
    <custom-title-v1 title="挂号详情"></custom-title-v1>
    <div class="status-bar">
      <div
        class="status"
        :class="{
          cancel: orderInfo.orderStatus == -1,
          nopay: orderInfo.orderStatus == 0
        }"
      >
        <el-icon v-if="orderInfo.orderStatus == -1">
          <CircleClose />
        </el-icon>
        <icon-safety v-else></icon-safety>
        <div class="status-text">{{ orderInfo.param?.orderStatusString }}</div>
      </div>
      <div class="ads">
        <img src="../../../../assets/images/code_app.png" />
        <div class="info">
          <span>微信 关注 “北京114预约挂号” </span>
          <span>“快速预约挂号” </span>
        </div>
      </div>
    </div>
    <custom-title-v3 title="就诊人详情" class="title"></custom-title-v3>
    <div class="details-box">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="patient-info">
            <el-descriptions :column="1" border>
              <el-descriptions-item label="就诊人姓名">
                {{ orderInfo.patientName }}
              </el-descriptions-item>
              <el-descriptions-item label="就诊日期">
                {{ orderInfo.reserveDate }}
              </el-descriptions-item>
              <el-descriptions-item label="就诊医院">
                {{ orderInfo.hosname }}
              </el-descriptions-item>
              <el-descriptions-item label="就诊科室">
                {{ orderInfo.depname }}
              </el-descriptions-item>
              <el-descriptions-item label="医生职称">
                {{ orderInfo.title }}
              </el-descriptions-item>
              <el-descriptions-item label="医事服务费">
                <span class="point"> {{ orderInfo.amount }}元</span>
              </el-descriptions-item>
              <el-descriptions-item label="挂号单号">
                {{ orderInfo.outTradeNo }}
              </el-descriptions-item>
              <el-descriptions-item label="挂号时间">
                {{ orderInfo.createTime }}
              </el-descriptions-item>
            </el-descriptions>
            <div
              class="btn-group"
              v-if="orderInfo.orderStatus == 0 || orderInfo.orderStatus == 1"
            >
              <el-popconfirm
                title="确定取消预约吗?"
                @confirm="cancelOrderHandle"
              >
                <template #reference>
                  <el-button class="btn">取消预约</el-button>
                </template>
              </el-popconfirm>
              <el-button
                class="btn"
                type="primary"
                @click="payDialogOpenHandle"
                v-if="orderInfo.orderStatus == 0"
              >
                支付
              </el-button>
            </div>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="notice-points">
            <el-card class="box-card">
              <template #header>
                <div class="card-header">
                  <span>注意事项</span>
                </div>
              </template>
              <ul class="card-content">
                <li>
                  1.请确认就诊人信息是否准确，若填写错误将无法取号就诊，损失由本人承担；
                </li>
                <li class="point">
                  2.【取号】就诊当天需在 {{ orderInfo.fetchTime }}
                  在医院取号，未取号视为爽约，该号不退不换；
                </li>
                <li>
                  3.【退号】在 {{ orderInfo.quitTime }} 前可在线退号
                  ，逾期将不可办理退号退费；
                </li>
                <li>
                  4.北京114预约挂号支持自费患者使用身份证预约，同时支持北京市医保患者使用北京社保卡在平台预约挂号。请于就诊当日，携带预约挂号所使用的有效身份证件到院取号；
                </li>
                <li>
                  5.请注意北京市医保患者在住院期间不能使用社保卡在门诊取号。
                </li>
              </ul>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
    <!-- 支付框 -->
    <el-dialog
      v-model="dialogVisible"
      title="微信支付"
      width="400"
      @close="close"
    >
      <div class="pay-box">
        <img :src="ercodeImgUrl" alt="" />
        <p>请使用微信扫一扫</p>
        <p>扫描二维码支付</p>
      </div>
      <template #footer>
        <el-button type="primary" @click="closeDialog">关闭窗口</el-button>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped lang="less">
.order-details {
  .status-bar {
    margin-top: 20px;
    height: 80px;
    background-color: #f4f9ff;
    font-size: 16px;
    color: #4490f1;
    letter-spacing: 1px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;

    .status {
      display: flex;
      align-items: center;

      &.nopay {
        color: #67c23a;
      }
      &.cancel {
        color: #e4393c;
      }
      .icon {
        color: inherit;
        font-weight: 400;
        font-size: 28px;
      }

      .status-text {
        margin-left: 10px;
      }
    }

    .ads {
      color: #666;
      font-weight: 300;
      display: flex;
      align-items: center;

      img {
        width: 40px;
        height: 40px;
      }

      .info {
        display: flex;
        flex-direction: column;
        font-size: 12px;
        line-height: 20px;
        font-weight: 400;
        justify-content: space-between;
        padding: 0 20px;
      }
    }
  }

  .title {
    margin: 20px 0;
  }

  .details-box {
    display: flex;
    .point {
      color: red;
    }

    .patient-info {
      :deep(.el-descriptions__label) {
        width: 120px;
        font-weight: 900;
      }
      .btn-group {
        margin: 20px 0;
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        .btn {
          width: 100px;
          height: 35px;
          line-height: 35px;
          font-weight: 900;
        }
      }
    }

    .notice-points {
      .box-card {
        .card-header {
          font-weight: 900;
        }

        ul.card-content {
          padding: 0;

          li {
            line-height: 25px;
            text-align: justify;
          }
        }
      }
    }
  }

  .pay-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border-top: 1px solid #eee;
    margin: -30px -20px;
    padding: 20px;
    img {
      margin-bottom: 10px;
      width: 220px;
      height: 220px;
    }
    p {
      line-height: 30px;
    }
  }
}
</style>
